<!-- #section:basics/content.breadcrumbs -->
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">权限管理</a>
        </li>

        <li>
            <a href="#">用户管理</a>
        </li>

    </ul>
    <!-- /.breadcrumb -->

</div>

<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">
    <!-- /section:settings.box -->
    <div class="page-content-area">
        <div class="page-header">
            <button class="btn btn-sm btn-success btn-info" id="id-btn-dialog2" render-dialog="addUser" title="新增用户">新增</button>
            <button class="btn btn-sm btn-yellow">
                <i class="ace-icon fa fa-users"></i>
                系统管理员
            </button>

            <!--隐藏层-->
            <div id="dialog-addUser" class="hide dialog-add">
                <table>
                     <tr ng-show="message">
                                <td colspan="2">
                                    <span class="red">{{message}}</span>
                                </td>
                            </tr>
                    <tr>
                        <td>
                            用户名
                        </td>
                        <td>
                            <input type="text" ng-model="user.name" >
                        </td>
                        <td>
                            密码
                        </td>
                        <td>
                            <input type="text" ng-model="user.password">
                        </td>
                    </tr>

                    <tr>
                        <td>
                            电子邮箱
                        </td>
                        <td>
                            <input type="text" ng-model="user.email">
                        </td>
                        <td>
                            联系电话
                        </td>
                        <td>
                            <input type="text" ng-model="user.telephone">
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top">
                            选择角色
                        </td>
                        <td colspan="3">
                               <div class="select_tree">
                                <div class="select_pointer">
                                    <span class="select_font">选择角色（多选）</span><span ng-show="message">{{message}}</span>
                                    <span class="glyphicon glyphicon-collapse-down" style="color: #878787;float:right"></span>
                                </div>
                                <div class="select_content">
                                    <ul id="" class="treetable dumpl_select">
                                        <li ng-repeat="role in roles" data-id="{{role.id}}" on-tree-select>
                                                <div><span>{{role.name}}</span></div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- #dialog-message -->
        </div>
        <!-- /.page-header -->

        <div class="row">

            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                 <span class="red">{{message}}</span>
                <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>

                         <th class="center">
                            <label class="position-relative">
                                <input type="checkbox" class="ace"/>
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th>序号</th>
                        <th>角色</th>
                        <th class="hidden-480">用户名</th>
                        <th class="hidden-480">联系电话</th>
                        <th class="hidden-480">邮箱</th>
                        <th>删除</th>
                        <th>修改</th>
                        <th class="hidden-480">冻结</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr ng-repeat="user in users" on-finish-render-filters data-id="{{user.id}}">
                         <td class="center">
                            <label class="position-relative">
                                <!--<input type="checkbox" class="ace" name="user_id" ng-model="User.user_id[$index]" ng-checked="true" ng-true-value="{{user.id}}" ng-false-value="false" ng-change="change()"/>-->
                                <input type="checkbox" class="ace" name="user_id"/>
                                <span class="lbl"></span>
                            </label>
                        </td>
                         <td class="center">
                             {{$index+1}}
                        </td>
                        <td>
                            <span ng-repeat="role in user.roles">
                                {{role.name}}&emsp;
                            </span>
                        </td>
                        <td class="hidden-480">
                            {{user.name}}
                        </td>
                        <td class="hidden-480">
                            {{user.telephone}}
                        </td>
                        <td class="hidden-480">
                            {{user.email}}
                        </td>
                        <td>

                            <button class="btn btn-warning btn-xs delete">
                                <i class="ace-icon glyphicon glyphicon-trash"></i>
                            </button>

                        </td>
                        <td>
                            <div class="hidden-sm hidden-xs btn-group">
                                <!--<button class="btn btn-xs btn-purple update" update data-dialog="addUser" title="修改用户信息" data-id="{{user.id}}">-->
                                 <button class="btn btn-xs btn-purple" data-id="{{role.id}}" data-toggle="modal" data-target="#updateUser" ng-model="user" edit>
                                <i class="ace-icon fa fa-pencil align-top bigger-125"></i>
                                    修改
                                </button>
                            </div>

                            <div class="hidden-md hidden-lg">
                                <div class="inline position-relative">
                                    <button class="btn btn-minier btn-purple dropdown-toggle" data-toggle="dropdown"
                                            data-position="auto">
                                        <i class="ace-icon fa fa-pencil align-top bigger-125"></i>
                                    </button>
                                </div>
                            </div>
                        </td>
                        <td class="hidden-480">
                            <label>
                                <input name="switch-field-1" class="ace ace-switch ace-switch-4" type="checkbox">
                                <span class="lbl"></span>
                            </label>
                        </td>

                    </tr>

                    </tbody>
                </table>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.page-content-area -->
</div><!-- /.page-content -->

<!-- 模态框（Modal） -->
<div class="modal fade" id="updateUser" tabindex="-1" role="dialog"
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
               修改用户信息
            </h4>
         </div>
         <div class="modal-body dialog-add">
             <table>
                     <tr ng-show="message">
                                <td colspan="2">
                                    <span class="red">{{message}}</span>
                                </td>
                            </tr>
                    <tr>
                        <td>
                            用户名
                        </td>
                        <td>
                            <input type="text" ng-model="user.name" >
                        </td>
                        <td>
                            密码
                        </td>
                        <td>
                            <input type="text" ng-model="user.password">
                        </td>
                    </tr>

                    <tr>
                        <td>
                            电子邮箱
                        </td>
                        <td>
                            <input type="text" ng-model="user.email">
                        </td>
                        <td>
                            联系电话
                        </td>
                        <td>
                            <input type="text" ng-model="user.telephone">
                        </td>
                    </tr>
                    <tr>
                        <td style="vertical-align: top">
                            选择角色
                        </td>
                        <td colspan="3">
                               <div class="select_tree">
                                <div class="select_pointer">
                                    <span class="select_font">选择角色（多选）</span><span ng-show="message">{{message}}</span>
                                    <span class="glyphicon glyphicon-collapse-down" style="color: #878787;float:right"></span>
                                </div>
                                <div class="select_content">
                                    <ul id="" class="treetable dumpl_select">
                                        <li ng-repeat="role in roles" data-id="{{role.id}}" on-tree-select>
                                                <div><span>{{role.name}}</span></div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default updateClose_btn"
               data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary" ng-model="user" update>
               提交更改
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->

<!-- inline scripts related to this page -->
<script type="text/javascript">
    jQuery(function ($) {


        //override dialog's title function to allow for HTML titles
        $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
            _title: function (title) {
                var $title = this.options.title || '&nbsp;'
                if (("title_html" in this.options) && this.options.title_html == true)
                    title.html($title);
                else title.text($title);
            }
        }));

        /**
         var tableTools = new $.fn.dataTable.TableTools( oTable1, {
					"sSwfPath": "../../copy_csv_xls_pdf.swf",
			        "buttons": [
			            "copy",
			            "csv",
			            "xls",
						"pdf",
			            "print"
			        ]
			    } );
         $( tableTools.fnContainer() ).insertBefore('#sample-table-2');
         */


//        $("#id-btn-dialog2").on('click', function (e) {
//            e.preventDefault();
//
//            var dialog = $("#dialog-addUser").removeClass('hide').dialog({
//                modal: true,
//                title: "<div class='widget-header widget-header-small'><h4 class='smaller'>新增用户</h4></div>",
//                title_html: true,
//                width: 600,
//                buttons: [
//                    {
//                        text: "取消",
//                        "class": "btn btn-xs",
//                        click: function () {
//                            $(this).dialog("close");
//                        }
//                    },
//                    {
//                        text: "确定",
//                        "class": "btn btn-primary btn-xs save",
//                        click: function () {
//                        }
//                    }
//                ]
//            });
//        });


    });
</script>
